<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-10-12 14:09:27
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-12 17:24:36
 * @FilePath: \ft-apply-admin\src\views\DataCenter\HRStatement\HRStatementDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="detail">
    <div class=" flex items-center color-#333 mb-29px">
      <span class="font-size-20px font-600 mr-10px">HR报表</span>
      <div class="font-size-14px font-400 mt-5px">{{ query.startTime }} -{{ query.endTime }}</div>
    </div>
    <div class="timeTable">
      <template v-if="query.type == 'time'">
        <div class="wrap">
          <div class="title">
            <span></span>
            月报表
          </div>
          <BasicTable :multiple-sort="true" rowKey="id" @register="registerMonthTable" size="small"
            :scroll="{ x: 1200 }">
          </BasicTable>
        </div>
        <div class="wrap">
          <div class="title">
            <span></span>
            周报表
          </div>
          <BasicTable :multiple-sort="true" rowKey="id" @register="registerWeekTable" size="small"
            :scroll="{ x: 1200 }">
          </BasicTable>
        </div>
      </template>
      <div class="wrap" v-else>
        <div class="title">
          <span></span>
          各环节率
        </div>
        <BasicTable :multiple-sort="true" rowKey="id" @register="registerRateTable" size="small" :scroll="{ x: 1200 }">
        </BasicTable>
      </div>
    </div>

  </div>
</template>

<script setup lang='ts'>
import { ref, computed } from "vue"
import { useRoute } from "vue-router";
import { hrDataReportDetail, weekReport, monthReport } from "@/api/data-center/hrdata.ts";
import { BasicTable, useTable } from '@/components/Table';
import { weekColumns, monthColumns, rateColumns } from "./component/detailData"
const route = useRoute();
const query = computed(() => {
  return route.query
})

const getWeekReport = async () => {
  const { timeLabel: year, startTime: beginTime, endTime } = query.value
  const data = await weekReport({
    year,
    beginTime,
    endTime
  })
  return data
}
const getMonthReport = async () => {
  const { timeLabel: year, startTime: beginTime, endTime } = query.value
  const data = await monthReport({
    year,
    beginTime,
    endTime
  })
  return data
}

const getHrDataReportDetail = async () => {
  const { timeLabel: year, startTime: beginTime, endTime } = query.value
  const data = await hrDataReportDetail({
    year,
    beginTime,
    endTime
  })
  const map =
  {
    resumeSubmitNum: "简历",
    arrivalScheduledNum: "待面",
    arrivalAcceptedNum: "到面",
    interviewAcceptedNum: "过面",
    trainingScheduledAcceptedNum: "待培",
    trainingArrivalAcceptedNum: "到培",
    assessmentAcceptedNum: "过培",
    waitSignedNum: "待入职-待签",
    onBoardingInProgressNum: "待入职-已签",
    confirmedDeclinedNum: "离职",
    probationFailedNum: "劝退",
    workingNum: "在职",
    onDutyNum: "在岗-未请长假",
    leadTeacherNum: "已代课教师",
    onBoardingCount: "已入职",
    purposeCount: "目标数",
    purposeRate: "目标完成率",
    arrivalInterviewRate: "到面率",
    interviewPassRate: "过面率",
    trainingArrivalRate: "到培率",
    trainingPassRate: "过培率",
    trainingPassSignRate: "过培签约率",
    trainingPassEntryRate: "过培入职率"
  }
  let list: any = [];
  for (const key in map) {
    list.push({
      key: key, label: map[key]
    })
  }
  const result = list.map(({ key, label }) => {
    const entry = { key, label };
    data.forEach(division => {
      entry[division.typeName] = label?.indexOf("率") > -1 ? division[key] + '%' : division[key];
    });
    return entry;
  });
  return result
}

const [registerWeekTable] = useTable({
  api: getWeekReport,
  columns: weekColumns,
  pagination: false,
  clearSelectOnPageChange: true,
  clickToRowSelect: false,
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: false,
})
const [registerMonthTable] = useTable({
  api: getMonthReport,
  columns: monthColumns,
  pagination: false,
  clearSelectOnPageChange: true,
  clickToRowSelect: false,
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: false,
})
const [registerRateTable] = useTable({
  api: getHrDataReportDetail,
  columns: rateColumns,
  pagination: false,
  clearSelectOnPageChange: true,
  clickToRowSelect: false,
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: false,
})

</script>
<style lang="less" scoped>
.timeTable {
  display: flex;
  flex-direction: column;
  gap: 25px;

  .wrap {
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    padding: 13px 16px;
    box-sizing: border-box;
  }
}

.title {
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 21px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  span {
    width: 4px;
    height: 18px;
    background: #209EE4;
    display: block;
    margin-right: 10px;
    border-radius: 0 3px 3px 0;
  }
}
</style>